<template>
    <up-popup :show="show" :round="20" :closeable="true" mode="bottom" @close="close">
        <view>
            <view class="title center ft-36 bold t-3">选择客房和入住人数</view>
            <view class="tip ft-24 t-6 align-center pl-30">
                <hj-image src="tips-01.png" height="32rpx" width="32rpx" mode="aspectFill" />
                <text class="ml-8">入住人数较多时，试试增加间数</text>
            </view>
            <view class="pl-30 pr-30 pb-40 ft-30">
                <view class="list align-center space-between">
                    <view class="t-3 column">间数</view>
                    <hj-number-box v-model="checkInInfo.roomAmount" />
                </view>
                <view class="list align-center space-between">
                    <view class="t-3 column">成人数</view>
                    <hj-number-box :min="checkInInfo.roomAmount" v-model="checkInInfo.adult" />
                </view>
                <view class="list align-center space-between">
                    <view class="t-3 column">
                        <text class="line-height1">儿童数</text>
                        <text class="ft-24 t-9 line-height1 mt-6">0-17岁</text>
                    </view>
                    <hj-number-box :min="0" v-model="checkInInfo.confirmhildren" />
                </view>
                <view class="w100 center ft-32 t-w mt-30 accom br-44 bold" @click="handleAccom"
                    >完成</view
                >
            </view>
            <hj-safe-footer />
        </view>
    </up-popup>
</template>

<script setup>
/**
 * @description 入住数量选择弹窗
 * @author yinzhi
 * @date 2025-05
 * @param { Boolean } show 控制弹窗是否显示
 * @example <hj-checkIn-info />
 */
import { ref, watch } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
import props from './props'
const { show } = defineProps(props)

const checkInInfo = ref({
    roomAmount: 1, //房间数量 默认1
    adult: 1, //成人数量
    confirmhildren: 0 //儿童数量
})

// 监听 show 属性的变化
watch(
    () => props.show, // 第一个参数，返回需要监听的值
    newShowValue => {
        if (newShowValue) {
            // 当弹窗显示时，将 store 中的值赋值给组件内的 checkInInfo
            checkInInfo.value = {
                // 保留默认值，防止 store 中对应属性不存在
                roomAmount: store.state.platform.checkInInfo?.roomAmount || 1,
                adult: store.state.platform.checkInInfo?.adult || 1,
                confirmhildren: store.state.platform.checkInInfo?.confirmhildren || 0
            }
        }
    },
    { immediate: true } // 配置对象，设置 immediate 为 true 表示初始化时立即执行一次回调
)

// 完成人数间数信息并关闭弹窗
const handleAccom = () => {
    store.commit('platform/setCheckInInfo', {
        ...store.state.platform.checkInInfo,
        ...checkInInfo.value
    })
    close()
    emit('confirm')
}

const emit = defineEmits(['close'])
// 关闭弹窗
const close = () => {
    emit('close')
}
</script>

<style scoped lang="scss">
.list {
    height: 110rpx;
    border-top: 1px solid #f1f1f1;
}
.list:first-child {
    border: none;
}
.title {
    line-height: 94rpx;
}
.tip {
    height: 60rpx;
    background-color: rgba($color: $uni-color-primary, $alpha: 0.08);
}
.accom {
    height: 88rpx;
    background: $uni-color-primary;
}
</style>
